Flutter GridView

您所在的位置：网站首页 › flutter gridview 点击 › Flutter GridView

Flutter GridView

2024-06-20 18:27| 来源: 网络整理| 查看: 265

今天，我们来聊聊网格布局GridView。

GridView

构造数据（生成Widgets）

List getDataList() { List list = []; for (int i = 0; i < 100; i++) { list.add(i.toString()); } return list; } List getWidgetList() { return getDataList().map((item) => getItemContainer(item)).toList(); } Widget getItemContainer(String item) { return Container( alignment: Alignment.center, child: Text( item, style: TextStyle(color: Colors.white, fontSize: 20), ), color: Colors.blue, ); }

GridView有好几种写法，万变不离其宗。我们一个个来看看。

写法一：GridView.count GridView.count( //水平子Widget之间间距 crossAxisSpacing: 10.0, //垂直子Widget之间间距 mainAxisSpacing: 30.0, //GridView内边距 padding: EdgeInsets.all(10.0), //一行的Widget数量 crossAxisCount: 2, //子Widget宽高比例 childAspectRatio: 2.0, //子Widget列表 children: getWidgetList(), );

效果：

GridView.count.gif

对于这种写法，此时单个Widget的宽高已经不起作用了。在我上面构造数据的那一步中，我并没有指定Container的的宽高，这里我们就将其宽高设置为5，看下效果。

Widget getItemContainer(String item) { return Container( width: 5.0, height: 5.0, alignment: Alignment.center, child: Text( item, style: TextStyle(color: Colors.white, fontSize: 20), ), color: Colors.blue, ); } 指定Container 宽高

可以看出没有效果。因为，我们在这里已经指定了每一行分成几列以及宽高比，还有边距等等。所以，我们后面再指定单个item的宽高，已经无效。

其实GridView跟我之前讲过的ListView，基本类似，都是BoxScrollView的子类。

GridView与ListView比较

GridView与ListView比较写法二：GridView.builder @override Widget build(BuildContext context) { List datas = getDataList(); return GridView.builder( itemCount: datas.length, //SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量Widget gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( //横轴元素个数 crossAxisCount: 3, //纵轴间距 mainAxisSpacing: 20.0, //横轴间距 crossAxisSpacing: 10.0, //子组件宽高长度比例 childAspectRatio: 1.0), itemBuilder: (BuildContext context, int index) { //Widget Function(BuildContext context, int index) return getItemContainer(datas[index]); }); }

abstract class SliverGridDelegate gridDelegate用来指定GridView的构建方式，具体实现有两个。

SliverGridDelegate 刚才这里例子，使用的SliverGridDelegateWithFixedCrossAxisCount。下面，我们来使用它的另一个实现SliverGridDelegateWithMaxCrossAxisExtent。

写法三：GridView.builder（SliverGridDelegateWithMaxCrossAxisExtent） GridView.builder( itemCount: datas.length, itemBuilder: (BuildContext context, int index) { return getItemContainer(datas[index]); }, gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( //单个子Widget的水平最大宽度 maxCrossAxisExtent: 200, //水平单个子Widget之间间距 mainAxisSpacing: 20.0, //垂直单个子Widget之间间距 crossAxisSpacing: 10.0 ), );

对于SliverGridDelegateWithMaxCrossAxisExtent而言，水平方向元素个数不再固定，其水平个数也就是有几列，由maxCrossAxisExtent和屏幕的宽度以及padding和mainAxisSpacing等决定。

例如：我这里的虚拟机宽度为400，当maxCrossAxisExtent:50时，有8列；当maxCrossAxisExtent:100时，有4列。如下：

maxCrossAxisExtent 效果内容内容 maxCrossAxisExtent:50 image.png maxCrossAxisExtent:100 image.png 写法四： @override Widget build(BuildContext context) { List datas = getDataList(); return GridView.custom( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, mainAxisSpacing: 10.0, crossAxisSpacing: 20.0, ), childrenDelegate: SliverChildBuilderDelegate((context, position) { return getItemContainer(datas[position]); }, childCount: datas.length)); } GridView.custom.gif

这几个参数，上面都讲过了，不再赘述了。

本文代码地址

Flutter 豆瓣客户端，诚心开源 Flutter Container Flutter SafeArea Flutter Row Column MainAxisAlignment Expanded Flutter Image全解析 Flutter 常用按钮总结 Flutter ListView豆瓣电影排行榜 Flutter Card Flutter Navigator&Router(导航与路由) OverscrollNotification不起效果引起的Flutter感悟分享 Flutter 上拉抽屉实现 Flutter 豆瓣客户端，诚心开源 Flutter 更改状态栏颜色

【本文地址】

Flutter GridView

Flutter GridView

今日新闻

推荐新闻